<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet customLayer-svg 1.4.0</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <style>
    body {
      margin: 0;
    }
    #map {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
<div id="map"></div>
<div width="500" height="800" style="background: #000;"></div>
<script src="../../dist/Leaflet.CustomLayer.js"></script>
<script>
  var map = L.map("map", {
    zoomAnimation: true
  }).setView([39.910088, 116.401601], 3);

  L.tileLayer("https://{s}.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiZ2xlYWZsZXQiLCJhIjoiY2lxdWxoODl0MDA0M2h4bTNlZ2I1Z3gycyJ9.vrEWCC2nwsGfAYKZ7c4HZA")
    .addTo(map);

  function svgDOMUtil(tag, attrs) {
    var el= document.createElementNS("http://www.w3.org/2000/svg", tag);
    for (var k in attrs)
      el.setAttribute(k, attrs[k]);
    return el;
  }

  var rect;
  var onInit = function() {
    rect = svgDOMUtil("rect", {
      style: "fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"
    });
    this.getContainer().appendChild(rect);
  }
  var onRender = function() {
    this.setFullLayerBounds();

    let point = map.latLngToContainerPoint({
      lat: 39.910088,
      lng: 116.401601
    })

    var attr = {
      x: point.x,
      y: point.y,
      width: 100,
      height: 100,
    }
    for (var k in attr) {
      rect.setAttribute(k, attr[k]);
    }
  }

  var canvasLayer = L.customLayer({
    container: document.createElementNS("http://www.w3.org/2000/svg", "svg"), // DomElement
    padding: 0.1,
    minZoom: 3,
    maxZoom: 16,
    opacity: 1,
    visible: true,
    zIndex: 120
  });

  canvasLayer.on("layer-beforemount", function() {
    console.log("layer-beforemount");
  });

  canvasLayer.on("layer-mounted", function() {
    console.log("layer-mounted");
    onInit.bind(this)();
  });

  canvasLayer.on("layer-render", function() {
    console.log("layer-render");
    onRender.bind(this)();
  });

  canvasLayer.on("layer-beforedestroy", function() {
    console.log("layer-beforedestroy");
  });

  canvasLayer.on("layer-destroyed", function() {
    console.log("layer-destroyed");
  });

  canvasLayer.addTo(map);
</script>
</body>
</html>
